<template>
    <view class="Wrapper" :style="{ '--color': color, height: System.windowHeight + 'px' }">
        <status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
        <swiper class="Swiper" :indicator-dots="false" :autoplay="false" circular :interval="3000" :duration="1000">
            <swiper-item v-for="(item, index) in banner" :key="index">
                <image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
            </swiper-item>
        </swiper>

        <view class="Room" :style="{ height: roomHeight }">
            <image :src="romTopImg" mode="widthFix" class="rows"></image>
            <view class="romBox">
                <view class="Nav">
                    <view class="flex-1">
                        <u-tabs
                            :list="open_date"
                            lineColor="#d7b06d"
                            @click="click"
                            :inactiveStyle="inactiveStyle"
                            :activeStyle="activeStyle"
                            :lineHeight="0"
                            :lineWidth="40"
                            :current="current"
                        ></u-tabs>
                        <!-- lineColor="#d7b06d" -->
                    </view>
                    <view class="allNav" @click.stop="show = true">更多时间</view>
                </view>

                <view class="botBox" v-for="(item, index) in site_time" :key="index" v-if="current == index">
                    <view class="listBox" v-for="(subItem, subIndex) in item" :key="subIndex">
                        <view class="d-flex a-center">
                            <image :src="$imgUrls(subItem.img)" mode="aspectFill" class="subItem_img"></image>
                            <view class="flex-1 conList">
                                <text class="title">{{ subItem.name }}</text>
                                <!--  <text class="time">开宴时间：{{ subItem.open_time }}</text> -->
                                <view class="row" v-if="subItem.price_info.length">
                                    <view class="privce_list" v-for="(tItem, tIndex) in subItem.all_price_info" :key="tIndex">
                                        <text class="privce_discount">{{ tItem.data }}</text>
                                        <!-- <text class="privce_Origina" v-if="tItem.full_price">{{ tItem.full_price }}</text> -->
                                    </view>
                                </view>
                            </view>
                            <view class="p-re p-right20">
                                <view class="Nowreserve" @click="NowReserve(subItem)">立即预定</view>
                                <image :src="teaImg" mode="aspectFill" class="teaImg"></image>
                            </view>
                        </view>

                        <view class="row j-sb a-center m-top10">
                            <text class="Remaining">座席剩余：{{ subItem.available_site }}</text>
                            <text class="Remaining">妆造剩余：{{ subItem.make_up_num }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <u-calendar
            :show="show"
            ref="calendar"
            :showSubtitle="false"
            mode="single"
            color="#275e58"
            :defaultDate="customList[current]"
            :customList="customList"
            monthNum="2"
            @confirm="confirm"
            @close="show = false"
        ></u-calendar>

        <u-popup :show="showContent" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="sowCone">
                <text class="row j-centert black size34 bold">预定须知</text>
                <view class="cponView">
                    <u-parse :content="site_config.content"></u-parse>
                </view>
                <view class="botFot">
                    <view class="notconti" @click="ageBtn">
                        <text class="white size28">我已阅读并同意此协议</text>
                        <text class="size28 white" v-if="ageTime > 0">({{ ageTime }}s)</text>
                    </view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="isOk" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="sowCone" v-if="reconfirmData">
                <text class="size32 bold black p-top10 p-bot10 t-letter4">您想预订的餐秀</text>
                <view class="row a-center color_33 size28 p-top12">宴会日期：{{ open_date[current].name }}</view>
                <view class="row a-center color_33 size28 p-top12">宴会名称：{{ reconfirmData.name }}</view>
                <view class="row a-center color_33 size28 p-top12">开宴时间：{{ reconfirmData.open_time }}</view>
                <view class="row a-center color_33 size28 p-top12">宴席剩余：{{ reconfirmData.available_site }}</view>
                <view class="row a-center color_33 size28 p-top12">装造剩余：{{ reconfirmData.make_up_num }}</view>
                <view class="row j-sa a-center m-top30 m-bot10">
                    <view class="okbtn Cancel" @click="isOk = false">取消</view>
                    <view class="okbtn Continue" @click="Config_btn">确定</view>
                </view>
            </view>
        </u-popup>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                showModal: false,
                banner: [],
                customList: [],
                open_date: [],
                site_time: [],
                current: 0,
                inactiveStyle: {
                    fontSize: '14px',
                    color: '#cb976f'
                },
                activeStyle: {
                    fontSize: '14px',
                    color: '#9f4629',
                    fontWeight: 'bold'
                },
                show: false,
                showContent: false,
                color: '#d7b06d',
                site_config: '',
                ageTime: 3,
                ageFlge: false,
                ageDown: null,
                ageId: '',
                isOk: false,
                reconfirmData: '',
                romTopImg: 'https://msraimgcdn.mogoie.com/6166/1754105317713.png',
                teaImg: 'https://msraimgcdn.mogoie.com/6166/1754105327185.png'
            };
        },

        onLoad() {
            this.getSiteTimeList();
        },

        methods: {
            getSiteTimeList() {
                this.$http
                    .get({
                        url: '/SiteApi/getSiteTimeList'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const Result = res.data;
                        this.site_config = Result.site_config;
                        this.banner = Result.banner || [];
                        this.customList = Result.open_calender || [];
                        this.open_date = Result.open_date || [];
                        this.site_time = Result.site_time_day_time || [];
                        this.showContent = true;
                        this.ageDown = setInterval(() => {
                            if (this.ageTime > 0) {
                                this.ageTime--;
                            } else {
                                clearInterval(this.ageDown);
                            }
                        }, 1000);
                    });
            },
            NowReserve(reconfirmData) {
                if (!this.vid) return (this.showModal = true);
                this.reconfirmData = reconfirmData;
                this.isOk = true;
            },
            click(e) {
                this.current = e.index;
            },

            confirm(e) {
                const Index = this.customList.findIndex((n) => n == e[0]);
                this.current = Index;
                this.show = false;
            },

            ageBtn() {
                if (this.ageTime > 0) return;
                this.showContent = false;
            },
            CloseAge() {
                clearInterval(this.ageDown);
                this.showContent = false;
                this.ageTime = 3;
            },
            Config_btn() {
                this.isOk = false;
                this.toUrl(`Selectseat?id=${this.reconfirmData.id}`);
            }
        },
        onUnload() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },
        onHide() {
            clearInterval(this.ageDown);
            this.showContent = false;
        },

        computed: {
            ...mapState(['vid', 'System']),
            roomHeight() {
                return this.System.windowHeight - 375 + 170 + 'px';
            }
        }
    };
</script>

<style lang="scss">
    // page {
    //     background-color: #faf5f1;
    // }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .sowCone {
        width: 620rpx;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cponView {
        width: 100%;
        height: 760rpx;
        overflow-y: scroll;
        padding: 30rpx 10rpx;
    }
    .botFot {
        width: 100%;
        height: 130rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .notconti {
        width: 500rpx;
        height: 90rpx;
        background-color: $btnColor;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Swiper {
        width: 100%;
        height: 750rpx;
    }
    .Swiper swiper-item {
        width: 100%;
        height: 100%;
    }

    .Room {
        width: 690rpx;
        // margin: 0 auto;
        margin: -170px auto 0;
        position: relative;
        z-index: 100;
        display: flex;
        flex-direction: column;
    }

    .romBox {
        width: 100%;
        flex: 1;
        // min-height: 1000rpx;
        background-image: url('https://msraimgcdn.mogoie.com/6166/1754105317708.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .Nav {
        width: 100%;
        height: 80rpx;
        position: relative;
        z-index: 100;
        display: flex;
        align-items: center;
    }

    .allNav {
        // color: rgb(96, 98, 102);
        color: #cb976f;
        padding: 0 16rpx;
        font-size: 26rpx;
    }
    .botBox {
        padding-bottom: 30rpx;
    }
    .listBox {
        width: 100%;
        padding: 30rpx 0 30rpx 20rpx;

        border-top: 2px solid #f4bd76;
    }
    .subItem_img {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .conList {
        display: flex;
        flex-direction: column;
    }
    .Nowreserve {
        width: 160rpx;
        height: 54rpx;
        // background-color: $btnColor;
        background-color: #a0111c;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 27rpx;
        font-size: 24rpx;
        margin-left: 10rpx;
    }
    .teaImg {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .title {
        // color: #000;
        color: #9d4225;
        font-size: 32rpx;
        font-weight: bold;
    }
    .time {
        color: #999;
        font-size: 20rpx;
        margin-top: 4rpx;
    }
    .privce_list {
        padding: 8rpx 14rpx;
        background-color: #f6e3ca;
        color: #cc977c;
        border: 1px solid #fff;
        border-radius: 0 16rpx 0 16rpx;
        // border: 2rpx solid var(--color);
        // background-color: rgba(255, 230, 189, 0.5);
        //border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        margin-right: 10rpx;
        margin-top: 8rpx;
    }
    .privce_discount {
        font-size: 20rpx;
    }
    .privce_Origina {
        font-size: 22rpx;
        color: #999;
        margin-top: 2rpx;
        text-decoration: line-through;
    }
    .Remaining {
        // color: #000;
        color: #cb9175;
        font-size: 22rpx;
        margin-right: 16rpx;
        margin-top: 6rpx;
    }
    ::v-deep.u-calendar-month__title {
        display: none !important;
    }
    .okbtn {
        width: 260rpx;
        height: 80rpx;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
    }
    .Cancel {
        background-color: #f1f1f1;
        color: #999;
    }
    .Continue {
        background-color: $btnColor;
        color: #ffffff;
    }
</style>
